﻿@font-face {
  font-family: 'Fixedsys';
  font-style: normal;
  font-weight: normal;
  src: url('Fonts/FSEX300.ttf');
}

body
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url('Images/bgplaid.png');
}

#cabecalho 
{
	width: 100%;
	height:184px;
	position: relative;
	background-image: url('Images/bgtopo.png');
	background-repeat: repeat-x;
}

.cabecalhoconteudo {
width: 1002px;
margin: 0 auto;
}

.logo 
{
    float: left;
	width: 349px;
	height: 124px;
}
.logo img
{
    border: 0px;
}

.txtcaixaTot h1
{
    padding-top: 5px;
    margin: 0px 40px 0px; 
	padding-left: 25px;
	font-family: Fixedsys, monospace;
	color: #4d6274;
}

#network ul.network { 
margin-top: 7px;
}
	
#network ul.network li {
	list-style:none;	
	display:inline;
	
}
#network ul.network li a {
	float:right;
    padding-right: 5px;
}
#network ul.network li a img {
    border: 0px;
}

#busca {
    
    position:relative;
    horiz-align: right;
       
}

#busca input[type="text"] {

    float: right;
       
}

/* ~~ esse contêiner de largura fixa envolve os outros divs~~ */
.container
{
    overflow: auto;
    width: 960px;
    margin: 0 auto; /* o valor automático nos lados, combinado com a largura, centraliza o layout */
    background-color: #F9F9F9;
    border-left-color: #CCC;
    border-left-width: 2px;
    border-left-style: solid;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #CCC;
}


/* ~~o cabeçalho não tem uma largura definida. Ele pode ocupar toda a largura do layout. Possui um alocador de espaço de imagem que deve ser substituído pelo seu logotipo com link~~ */






/* ~~ Essas são as colunas para o layout. ~~ 

1) O padding é posto somente na parte superior e inferior dos divs. Os elementos nesses divs têm padding nos seus lados impedindo o modelo tipo caixa. Lembre-se: ao adicionar qualquer padding lateral ou bordas para o próprio div, ele será adicionado à largura que você define para criar a largura *total*. Também é possível remover o padding no elemento dentro do div e estabelecer um segundo div dentro do primeiro, sem largura, e com o padding necessário para o seu design.

2) Como as colunas são todas flutuantes, não foi dada nenhuma margem. Se for necessário adicionar margem, evite colocá-la no lado flutuante, por exemplo, uma margem direita em um div definido para flutuar à direita. Em vez disso, muitas vezes, o padding é utilizado. Para os divs em que essa regra tem que ser quebrada, é necessário adicionar a declaração "display:inline" que irá solucionar um erro recorrente em algumas versões do Internet Explorer em que a imagem é duplicada.

3) Como as classes podem ser usadas diversas vezes em um documento e um elemento também pode ter várias classes aplicadas, foram atribuídas às colunas nomes de classe ao invés de IDs. Por exemplo, se for necessário, os divs com duas barras laterais podem ser empilhados. Se preferir, é possível alterar facilmente para os IDs desde que esteja usando-os somente uma vez em cada documento.

4) Caso prefira seu navegador à esquerda ao invés de à direita, simplesmente flutue essas colunas para a direção oposta, todas à esquerda ao invés de à direita, e elas irão processar na ordem inversa. Não há necessidade de mover os divs ao redor da fonte HTML.

*/
.sidebar1 {
	float: right;
	width: 180px;
	background: #EADCAE;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 960px;
}



/* ~~ O rodapé ~~ */
#footer {
	background-image: url('Images/bgrodape.png');
	background-repeat: repeat-x;
	/*position: relative;/* isso possibilita que o hasLayout do IE6 faça a limpeza corretamente. */
	/*clear: both; /* essa propriedade de limpeza força o contêiner a reconhecer o conteúdo das colunas e onde elas terminam. */
	
}
#footer .content {
	width: 780px;
	margin: 0 auto;
}

/* ~~ flutuações diversas/limpeza de classes ~~ */
.fltrt {  /* essa classe pode ser usada para flutuar um elemento à direita da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* essa classe pode ser usada para flutuar um elemento à esquerda da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* essa classe pode ser colocada em um <br /> ou em um div vazio como o elemento final que segue o último div flutuado (no #contêiner) caso o rodapé seja removido ou retirado do contêiner. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}


#searchThis 
{
   
background: url('Images/bgbusca.png') no-repeat;
display: inline-block;
}

#searchBox, #searchButton {
background: none;
border:none;
}
#searchBox {
color: #D3643B;
float: right;
font-family: "lobster",cursive;
font-size: 14px;
height: 26px;
padding-left: 8px;
width: 253px;
    margin-right: 78px;
}
#searchButton {
cursor: pointer;
float: right;
height: 31px;
outline: medium none;
padding: 0;
width: 78px;
}

#autenticar 
{
    position: relative;
    float: right;
     top: 20px;
} 
#autenticar .menuAutenticado 
{
    position: relative;
    top: 40px;
    background-color: darkmagenta;  
}

#menu ul 
{
    font:80% Tahoma;
    padding:0px;
    margin:0px;
    float: left;
    width: 100%;
    
    list-style:none;
}

#menu ul li { display: inline; }

#menu ul li a 
{
    
    padding: 2px 10px;
    float:left;
    /* visual do link */
    
    color: #333;
    text-decoration: none;
    border-bottom:3px solid #EDEDED;
}

#menu ul li a:hover {
    background-color:#D6D6D6;
    color: #6D6D6D;
    border-bottom:3px solid #EA0000;
}

/* MODAL */
.load { position: absolute; top: 50%; left: 50%; width: 88px; height: 78px; margin: -39px 0 0 -44px; z-index: 99999;}
.bg_modal { position: absolute; top: 0; left: 0; z-index: 99998; }
.view_modal { position: absolute; left: 50%; top: 50%; text-align: left; z-index: 99998; }
.modal { visibility: hidden; cursor:pointer; }

.divLogin
{
    height: 350px;
}

#headerLogin
{
    margin-top: 30px;
}

#conteinerLogin
{
    padding: 20px 30px;
}

#conteinerLoginAutentic {
     font-family: Verdana;
    font-size: 12px;
    color: #2e5576;
}

#conteinerLoginAutentic .cxTexto span
{
   
}
.reqsenha {
  font-size: 11px;
    padding-top: 12px;   
}

.reqsenha a, a:link, a:active, a:visited, a:hover
{
   
    font-weight: bold;
    text-decoration: underline;
}

.btnEntrar 
{
    position: relative;
    padding-top: 8px;
    margin-left: 273px;
    width: 71px;

}

.btnEntrar 
{
    position: relative;
    padding-top: 8px;
    margin-left: 273px;
    width: 71px;

}

.txt {
     border: 1px solid #587ba9;
    color: #2e5576;
    font-family: Verdana;
}


#conteinerLoginAutentic .cxTexto input[type="text"],[type="password"]
{
    height: 34px;
    font-size: 16px;
    font-weight: bold;
    width: 340px;
}

.containerSeparador
{
    position: relative;
    height: 230px;
    width: 1px;
    margin-left: 370px;
    background-image: url('Images/lnvertical.png');
    background-repeat: repeat-y;
}

#conteinerLoginNovarconta 
{
    top: -230px;
    position: relative;
    float: right;
    width: 330px;
    background-color: coral;
}



.posts {
	
	-moz-border-radius-bottomright: 5px;
	-webkit-border-button-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	border-top-left-radius: 5px;
	border: 1px;
	height: 245px;
	width: 170px;
	border-style: dashed;
	border-color: #CCC;
	padding: 5px;
	margin: 0px 5px 15px;
	float:left;
}

.divTitulo{

}
.divProduto{
	position:relative;
	background-color:#00F;
	
}

.ImgProduto{
	width:164px;
	height: 150px;
	border:3px solid #F3F3F3;
}

.divDesricao{
	margin-top:0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	color: #333;
	height:40px;
}

.divPreco
{
    text-align: center;
    position: relative;
    float: left;
    width: 40%;
    margin-top: 8px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    color: #F00;
    background-color: #DDDDDD;
    font-weight: lighter;
}
.divBtnComprar{
	float:right;
	width:50%;
	margin-top:8px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	color: #999;
}
